import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import EditTemplate from '@/components/EditTemplate';
import CapitalSource from '@/pages/components/capitalSource';
import { Row, Col, Tabs, Empty } from 'antd';
import StoreManage from '@/pages/declareManage/storeManage/edit';
import PlanManage from '@/pages/declareManage/planManage/edit';
import YearManage from '@/pages/declareManage/yearManage/edit';
import Setup from '@/pages/projectFillIn/setup/edit';
import Contract from '@/pages/projectFillIn/contract/edit';
import Scheme from '@/pages/projectFillIn/scheme/edit';
import Change from '@/pages/projectFillIn/change/edit';
import Examine from '@/pages/projectFillIn/examine/edit';
import Money from '@/pages/projectFillIn/money/edit';
import { timeFormat } from '@/utils/common';
import styles from './index.less';
const { TabPane } = Tabs;

const preFix = '/api/project/store/v1';
const urlList = [
  '/scheme/list',
  '/topic/list',
  '/paper/list',
  '/money/list',
  '/changes/list',
  '/check/list',
];

const BuildEdit = props => {
  const { location, dispatch, dict }: any = props;
  const [detail, setDetail] = useState(null);
  const [menus, setmenus] = useState([]);
  const [projectId, setProjectId] = useState('');
  const [tabn, settabn] = useState(4);
  const { id } = location.query;

  const saveUrl = '/api/check/v1/create';
  useEffect(() => {
    if (id) {
      dispatch({
        type: '$request/post',
        payload: {
          url: '/api/project/store/v1/project/detail',
          data: {
            uuid: id,
            page: 0,
            size: 10,
          },
        },
      }).then(res => {
        console.log('储备项目申报详情：', res);
        setDetail(res);
      });
    }
  }, []);

  const filters = [
    {
      title: '基础信息',
      list: [
        {
          key: 'name',
          type: 'input',
          label: '项目名称',
          span: 12,
        },
        {
          key: 'no',
          type: 'input',
          label: '项目ID',
          span: 12,
        },
        {
          key: 'code',
          type: 'input',
          label: '项目代码',
          span: 12,
        },
        {
          key: ['ownerOrgUnit', 'name'],
          type: 'text',
          label: '业主单位',
          span: 12,
        },
        {
          key: 'buildType',
          type: 'select',
          label: '项目性质',
          options: dict.buildType,
          span: 12,
        },
        {
          key: ['serviceTypeData', 'display'],
          type: 'text',
          label: '项目类型',
          span: 12,
        },
        {
          key: ['professionData', 'display'],
          type: 'text',
          label: '行业领域',

          span: 12,
          placeholder: '请选择',
        },
        {
          key: 'projectStatus',
          type: 'select',
          label: '项目状态',
          span: 12,
          options: dict.projectStatus,
        },
      ],
    },
  ];
  const tabChange = tab => {
    console.log('current tab:', tab);
    settabn(tab);
    setProjectId('');
    tab = tab - 4;
    if (tab < 0) return;
    setmenus([]);
    dispatch({
      type: '$request/post',
      payload: {
        url: preFix + urlList[tab],
        data: { uuid: id },
      },
    }).then(res => {
      setmenus(res);
      if (res && res.length) {
        setProjectId(res[0].uuid);
      }
    });
  };
  /**
   * 左边栏选中
   * @param uuid
   */
  const selectMene = uuid => {
    setProjectId(uuid);
  };
  const Faceplate = ({ children, type }) => {
    if (!menus || !menus.length)
      return (
        <div className={styles.plateContain} style={{ padding: '100px 0' }}>
          <Empty description="暂无数据" />
        </div>
      );
    return (
      <div className={styles.plateContain}>
        <div className={styles.menu}>
          {menus.map(item => (
            <div
              className={projectId == item.uuid ? styles.active : styles.item}
              onClick={() => selectMene(item.uuid)}
            >
              {timeFormat(item.date, 'YYYY-MM-DD')}
            </div>
          ))}
        </div>
        <div className={styles.content}>{children}</div>
      </div>
    );
  };

  return (
    <div>
      <EditTemplate
        filters={filters}
        initialValues={detail}
        updateUrl={saveUrl}
        readOnly={true}
      />
      <Tabs defaultActiveKey="0" onChange={tabChange} style={{ width: '100%' }}>
        <TabPane tab="储备申报" key="1">
          <StoreManage
            {...props}
            url="/api/project/store/v1/storeReport/detail"
          />
        </TabPane>
        <TabPane tab="规划申报" key="2">
          <PlanManage
            {...props}
            url="/api/project/store/v1/planReport/detail"
          />
        </TabPane>
        <TabPane tab="年度申报" key="3">
          <YearManage
            {...props}
            url="/api/project/store/v1/annualReport/detail"
          />
        </TabPane>
        <TabPane tab="建设方案" key="4">
          <Faceplate type={0}>
            {projectId && (
              <Scheme uuid={projectId} {...props} update={tabn == 4} />
            )}
          </Faceplate>
        </TabPane>
        <TabPane tab="立项记录" key="5">
          <Faceplate type={1}>
            {projectId && (
              <Setup {...props} uuid={projectId} update={tabn == 5} />
            )}
          </Faceplate>
        </TabPane>
        <TabPane tab="合同记录" key="6">
          <Faceplate type={2}>
            {projectId && (
              <Contract
                {...props}
                uuid={projectId}
                update={tabn == 6}
              ></Contract>
            )}
          </Faceplate>
        </TabPane>
        <TabPane tab="资金申请" key="7">
          <Faceplate type={3}>
            {projectId && (
              <Money {...props} uuid={projectId} update={tabn == 7} />
            )}
          </Faceplate>
        </TabPane>
        <TabPane tab="变更记录" key="8">
          <Faceplate type={4}>
            {projectId && (
              <Change {...props} uuid={projectId} update={tabn == 8}></Change>
            )}
          </Faceplate>
        </TabPane>
        <TabPane tab="验收记录" key="9">
          <Faceplate type={5}>
            {projectId && (
              <Examine {...props} uuid={projectId} update={tabn == 9}></Examine>
            )}
          </Faceplate>
        </TabPane>
      </Tabs>
    </div>
  );
};

export default connect((state: any) => state.base)(BuildEdit);
